import ReactECharts from "echarts-for-react";
import React from "react";

const HumiECharts = ({ humi }) => {
  // 湿度仪表盘配置
const fS = 12
  const option = {
    series: [
      {
        type: "pie",
        clockWise: false,
        radius: [40, 46],
        hoverAnimation: false,
        silent: true,
        center: ["50%", "50%"],
        labelLine: {
          show: false,
        },
        data: [
          {
            value: 100,
            itemStyle: {
              normal: {
                color: "#071925",
                borderWidth: 1,
                borderColor: "#073A66",
              },
            },
          },
          {
            value: humi,
            label: {
              normal: {
                rich: {
                  a: {
                    color: "#82ffff",
                    align: "center",
                    fontSize: fS,
                  },
                  b: {
                    color: "#5a627f",
                    align: "center",
                    fontSize: fS,
                  },
                  c: {
                    fontSize: fS,
                  },
                },
                formatter: function (params) {
  
                  return (
                    "{a|" + params.value + "}" + " {c|°c}" + "\n\n{b|湿度}"
                  );
                },
                position: "center",
                show: true,
                // textStyle: {
                //   fontSize: 14,
                //   color: "#fff",
                // },
              },
            },
            itemStyle: {
              normal: {
                color: "#0078ff",
  
              },
            },
          },
        ],
      },
      // 内圈

      {
        name: "",
        type: "pie",
        startAngle: 90,
        radius: [30, 32],
        hoverAnimation: false,
        center: ["50%", "50%"],
        itemStyle: {
          normal: {
            labelLine: {
              show: false,
            },
            color: "rgba(66, 66, 66, .4)",
            shadowBlur: 10,
            shadowColor: "rgba(253, 249, 20, .3)",
          },
        },
        data: [
          {
            value: 100,
          },
        ],
      },
    ],
  };
  return (
    <ReactECharts
      option={option}
      style={{ height: "200px", width: "100px" }}
      opts={{ renderer: "canvas" }}
    />
  );
};

export default HumiECharts;
